<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <w-player class="player" :key="key" :options="options"></w-player>
  </div>
</template>
<script lang="ts">
import { WPlayer } from 'vue-wplayer';
import "vue-wplayer/dist/style.css";
//在ts里建议使用第二种引入本地文件的方法,并在src目录下的shims-vue.d.ts文件内增加对json文件的支持
//import danmakuList from "@/danmaku.json";
const danmakuList = require('@/danmaku.json')


export default {
  name: "BilibiliWPlayer", //定义组件的名称
  components: {
    WPlayer
  },
  props: {
    //定义组件的对外暴露的属性，通过外部调用组件时，向组件内传递参数及对象   
    danmuku: Array, //弹幕库数据，传参是数组
    resource: String, //视频资源地址
  },
  data() {
    //定义组件内的属性,组件内属性调用方式使用生命周期关键字this 如：this.age
    return {
        key:1,
        options : {
        resource: {//视频源
          360: {
            name: "标清",
            type: "mp4",
            url: "http://upfile.myfz.fun/uploads%2F2022%2F09%2F24%2Fge4ZfU9g_137649199_u2-1-208.mp4",  //后期用这个代替，从父亲组件传参数，url:this.resource,
          },
          720: {
            name: "高清",
            type: "mp4",
            url: "http://upfile.myfz.fun/uploads%2F2022%2F09%2F24%2Fge4ZfU9g_137649199_u2-1-208.mp4",  //后期用这个代替，从父亲组件传参数，url:this.resource,
          },
        },
        danmaku: {//弹幕
          open: true,
          data: danmakuList,
        },
      }
    };
  },
  created() {
    //组件初始化时创建默认属性
  },
  mounted() {
    //同样也是组件初始化时使用，mounted方法会在页面完全加载后进行DOM相关的操作，如果使用created，有时初始化效果会失效，一般建议初始化使用mounted
  },
  methods: {
    //定义初始化方法
    initPlayer() {
      
    },
    onSubmit() {
      //定义一个事件和方法
      console.log("定义方法");
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
.player {
  width: 720px;
  height: 396px;
}
</style>